<html>

<head>
    <meta charset="utf-8" />
    <link href="http://at.alicdn.com/t/font_449040_m5e7bta9untmaemi.css" type="text/css" rel="stylesheet"></link>
    <script src="js/jquery-3.2.1.min.js"></script>
    <link href="codemirror/codemirror.css" type="text/css" rel="stylesheet"></link>
    <script src="codemirror/codemirror.js"></script>
    <script src="js/marked.js"></script>
    <style>
        html,
        body {
            margin: 0px;
            padding: 0px;
            font-size: 12px;
            font-family: Microsoft YaHei;
            overflow: hidden;
            height: 100%;
            width: 100%;
            user-select: none;
        }

        input {
            margin: 0px;
            padding: 0px;
            height: 24px;
            outline: none;
        }

        iframe {
            border: none;
            position: absolute;
            top: 36px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            display: none;
            height: 100%;
            width: 100%;
            z-index: 999999;
        }

        .pager {
            position: absolute;
            height: 72px;
            cursor: pointer;
            background: rgb(90, 160, 38);
            width: 32px;
            color: #fff;
            padding-top: 6px;
        }
        #articleListWrapper{
            left: 160px;right: 160px;
            overflow: hidden;display: none;
            border-radius: 6px;position:absolute;
            top: 50%;
            height: 530px;
            margin-top: -265px;
        }
        #closePager {
            border-top-right-radius: 6px;
            border-bottom-right-radius: 6px;
            right: 0px;
            top: 0px;
            height: 32px;
            padding: 0px;
            line-height: 32px;
            background: rgb(221, 72, 20);
        }

        #rightPager {
            border-top-right-radius: 6px;
            border-bottom-right-radius: 6px;
            right: 0px;
            bottom: 0px;
        }

        #leftPager {
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
            bottom: 0px;
        }
        #newArticlePager{
            top: 0px;
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
        }

        #articleListContainer {
            background:#ffffff;
            margin-left: 32px;
            margin-right: 32px;
            overflow: hidden;
        }

        #articleListBg {
            background: rgba(0, 0, 0, 0.6);
            position: absolute;
            top: 36px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            z-index: 99999;
            text-align: center;
            display: none;
        }

        .infoBox {
            margin-top: 12px;
            border: 1px solid #FFFFFF;
            width: 140px;
            border-radius: 3px;
            line-height: 22px;
            text-align: left;
            padding-left: 6px;
        }

        .infoBox img {
            width: 134px;
            height: 134px;
            margin-bottom: 6px;
        }

        .toolBtn {
            width: 36px;
            float: right;
            cursor: pointer;
            -webkit-app-region: no-drag;
        }

        #winClose:hover {
            background: rgb(221, 72, 20);
        }

        .toolBtn:hover {
            background: rgb(60, 60, 60);
        }

        .left {
            position: absolute;
            left: 0px;
            top: 117px;
            bottom: 3px;
            background: #ffffff;
            cursor: text;
            z-index: 9;
            width: 50%;
            padding-left: 3px;
            overflow: hidden;
        }

        .right {
            position: absolute;
            right: 0px;
            top: 117px;
            bottom: 3px;
            background: #ffffff;
            font-size: 13px;
            line-height: 23px;
            z-index: 9;
            width: 50%;
            overflow-y: scroll;
            padding-top: 6px;

        }

        .center {
            position: absolute;
            width: 8px;
            left: 50%;
            top: 117px;
            bottom: 0px;
            background: #eeeeee;
            z-index: 9;
            cursor: e-resize;
            z-index: 99;
        }

        p {
            padding: 0px;
            margin: 0px;
        }

        .wrap {
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid #aaaaaa;
            border-top: 1px solid #aaaaaa;
        }

        .iconfont {
            font-size: 13px;
        }

        .txt {
            font-size: 13px;
            font-weight: 500;
        }

        .editorBtnSelected {
            background: rgb(215, 212, 240);
        }

        textarea {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            font-family: Microsoft YaHei;
            font-size: 16px;
            border: none;
            outline: none;
        }

        .editorBtn {
            height: 30px;
            line-height: 30px;
            text-align: center;
            float: left;
            width: 37px;
            cursor: pointer;
            color: #555555;
            border-right: 1px solid #aaaaaa;
        }

        .editorBtn:hover {
            background: #FFFFFF;
        }

        .CodeMirror {
            font-family: Microsoft YaHei;
            font-size: 13px;
            line-height: 22px;
        }

        p {
            margin: 0px;
            padding: 0px;
        }

        blockquote {
            margin-left: 0px;
            padding-left: 18px;
            border-left: 6px solid #cccccc;
            background: #eeeeee;
            padding-top: 6px;
            padding-bottom: 6px;
        }

        th {
            padding: 6px 13px;
            border: 1px solid #ddd;
            font-weight: bold;
        }

        table {
            margin-top: 8px;
            margin-bottom: 8px;
            border-collapse: collapse;
            border-spacing: 0;
            display: block;
            width: 100%;
            overflow: auto;
            word-break: normal;
            word-break: keep-all;
        }

        thead {
            display: table-header-group;
            border-color: inherit;
            border-collapse: collapse;
        }

        tbody {
            display: table-row-group;
            border-color: inherit;
            border-collapse: collapse;
        }

        tr:nth-child(2n) {
            background-color: #f8f8f8;
            border-top: 1px solid #ccc;
        }

        td {
            padding: 6px 13px;
            border: 1px solid #ddd;
        }

        code {
            border: 1px solid #ddd;
            background: #f6f6f6;
            padding: 3px;
            border-radius: 3px;
            font-size: 14px;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin: 0px;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
            background-color: #fff;
        }

        ::-webkit-scrollbar-track {
            border-radius: 6px;
            background-color: #fff;
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 2px;
            background-color: #ddd;
        }

        .titleRow {
            line-height: 32px;
            height: 32px;
            border-bottom: dotted 1px #aaaaaa;
            overflow: hidden;
            text-align: left;
            font-size: 14px;
            cursor: pointer;
        }
    </style>
</head>

<body style="background:  #eeeeee;">
    <div style="height: 36px;background: rgb(74, 76, 88);color: #FFFFFF;
        -webkit-app-region: drag;
        line-height: 36px;font-size: 16px;">
        <div style="float: left;margin-left: 12px;font-size: 18px;">
            无忧博客园
            <span style="color: #aaaaaa;font-size: 12px;">博客园文章编辑器-markdown版本</span>
        </div>
        <div style="float: right;width: 160px;text-align: center;">
            <div id="winClose" class="toolBtn">
                <i class="iconfont icon-close47"></i>
            </div>
            <div id="winMax" class="toolBtn">
                <i class="iconfont icon-max"></i>
            </div>
            <div id="winMin" class="toolBtn">
                <i class="iconfont icon-min"></i>
            </div>
            <div id="toolRefreshBtn" class="toolBtn" style="display: none">
                <i class="iconfont icon-refresh"></i>
            </div>
        </div>
    </div>
    <!-- <div class="infoBox">
            赞助作者(支付宝)：<br />
            <img src="img/alipay.png" />
        </div>
        <div class="infoBox">
            赞助作者(微信)：<br />
            <img src="img/wechat.png" />
        </div> -->
    <div>
        <div style="height: 46px;clear: both;background:  #eeeeee;">
            <div id="saveBtn" style="float: right;line-height: 32px;height: 32px;
                background: rgb(221, 72, 20);color: #ffffff;
                border-top-left-radius: 12px;margin-top: 6px;
                border-bottom-left-radius: 12px;
                box-shadow: -3px 0px 3px #888888;
                cursor: pointer;
                width: 80px;text-align: center;">
                保存文章
            </div>
            <div id="getListBtn" style="float: left;line-height: 32px;height: 32px;width: 80px;text-align: center;
                background: rgb(90, 160, 38);color: #ffffff;
                border-top-right-radius: 12px;margin-top: 6px;
                border-bottom-right-radius: 12px;
                box-shadow: 3px 0px 3px #888888;
                cursor: pointer;
                ">
                文章列表
            </div>
            <div style="margin-left: 90px;margin-right: 90px">
                <input id="titleInput" type="text" placeholder="请在这里填写文章标题" style="border: none;height: 46px;line-height: 46px;text-align: center;
                    font-size: 16px;text-indent: 8px;width: 100%;background:  #eeeeee;" />
            </div>
        </div>
        <div class="main">
            <div class="wrap">
                <div class="editorBtn" onclick="bold()">
                    <i class="iconfont icon-bold"></i>
                </div>
                <div class="editorBtn" onclick="italic()">
                    <i class="iconfont icon-italic"></i>
                </div>
                <div class="editorBtn" onclick="strikethrough()">
                    <i class="iconfont icon-strikethrough"></i>
                </div>
                <div class="editorBtn txt" onclick="H(1)">
                    H1
                </div>
                <div class="editorBtn txt" onclick="H(2)">
                    H2
                </div>
                <div class="editorBtn txt" onclick="H(3)">
                    H3
                </div>
                <div class="editorBtn txt" onclick="H(4)">
                    H4
                </div>
                <div class="editorBtn txt" onclick="H(5)">
                    H5
                </div>
                <div class="editorBtn txt" onclick="H(6)">
                    H6
                </div>
                <div class="editorBtn" onclick="startWidth('>')">
                    <i class="iconfont icon-quoteleft"></i>
                </div>
                <div class="editorBtn" onclick="startWidth('* ')">
                    <i class="iconfont icon-listul"></i>
                </div>
                <div class="editorBtn" onclick="orderedList()">
                    <i class="iconfont icon-listol"></i>
                </div>
                <div class="editorBtn" onclick="link()">
                    <i class="iconfont icon-chain"></i>
                </div>
                <div class="editorBtn" onclick="table()">
                    <i class="iconfont icon-table"></i>
                </div>
                <div class="editorBtn" onclick="img()">
                    <i class="iconfont icon-image"></i>
                </div>
                <div class="editorBtn" onclick="code()">
                    <i style="font-size:16px;" class="iconfont icon-code"></i>
                </div>
                <div class="editorBtn" onclick="line()">
                    <i style="font-size:16px;" class="iconfont icon-min"></i>
                </div>
                <div class="editorBtn" onclick="emoji()">
                    <i style="font-size:16px;" class="iconfont icon-smileo"></i>
                </div>
            </div>
            <div style="height: 100%;background: #ffffff;"></div>
            <div class="left">
                <textarea id="mdStrTa" style="height: 100%;"></textarea>
            </div>
            <div class="right" id="right">

            </div>
            <div class="center" id="center">

            </div>
        </div>
    </div>
    <div id="articleListBg">
        <div style="font-size: 58px;text-align: center;margin-top: 198px;color: #ffffff;font-weight: bold;">
            请稍后...
        </div>
        <div id="articleListWrapper">
            <div id="articleListContainer">
                <div style="float: left;width: 50%;margin-left: -1px;border-right: dotted 1px #aaaaaa;height: 100%;">
                    <div id="articleLeft" style="margin: 16px;">
                    </div>
                </div>
                <div style="margin-left: 50%;height: 100%;">
                    <div id="articleRight" style="margin: 16px;">
                    </div>
                </div>
            </div>
            <div class="pager" id="rightPager">
                向<br />下<br />翻<br />页
            </div>
            <div class="pager" id="leftPager">
                向<br />上<br />翻<br />页
            </div>
            <div class="pager" id="closePager">
                <i class="iconfont icon-close47"></i>
            </div>
            <div class="pager" id="newArticlePager">
                新<br />增<br />文<br />章
            </div>
        </div>
        
    </div>
    <script src="js/bridge.js"></script>
    <!-- 编辑器按钮功能函数，以后要搞出去 -->
    <script>
        var wrapWidth = function (start, end) {
            if (!end) {
                end = start;
            }
            var arr = editor.doc.getSelections();
            var result = [];
            arr.forEach(item => {
                var tempArr = item.split('\n');
                for (var i = 0; i < tempArr.length; i++) {
                    if (tempArr[i]) {
                        tempArr[i] = start + tempArr[i] + end;
                    }
                }
                result.push(tempArr.join('\n'));
            })
            editor.doc.replaceSelections(result);
        };
        var startWidth = function (str) {
            var arr = editor.doc.getSelections();
            var result = [];
            arr.forEach(item => {
                var tempArr = item.split('\n');
                for (var i = 0; i < tempArr.length; i++) {
                    if (tempArr[i]) {
                        tempArr[i] = str + tempArr[i];
                    }
                }
                result.push(tempArr.join('\n'));
            })
            editor.doc.replaceSelections(result);
        };
        var bold = function () {
            wrapWidth("**");
        };
        var italic = function () {
            wrapWidth("*");
        };
        var strikethrough = function () {
            wrapWidth("~~");
        };
        var H = function (num) {
            //todo:不支持行内标题
            var i = 0;
            var str = "";
            while (i < num) {
                str += "#";
                i += 1;
            }
            wrapWidth(str + " ", " " + str);
        };
        var orderedList = function () {
            var arr = editor.doc.getSelections();
            var result = [];
            var index = 1;
            arr.forEach(item => {
                var tempArr = item.split('\n');
                for (var i = 0; i < tempArr.length; i++) {
                    if (tempArr[i]) {
                        tempArr[i] = index + '. ' + tempArr[i];
                        index += 1;
                    }
                }
                result.push(tempArr.join('\n'));
            })
            editor.doc.replaceSelections(result);
        };
        var link = function () {
            //todo:不支持跨行链接
            var link = prompt("请输入链接地址");
            var str = editor.doc.getSelection();
            str = '[' + str + '](' + link + ')';
            editor.doc.replaceSelection(str);
        };
        var table = function () {
            var numStr = prompt("请输入表格行列数，如3行6列为：3*6", "3*6");
            numStr = numStr.split("*");
            var rowNum = parseInt(numStr[0]);
            var colNum = parseInt(numStr[1]);
            var temp = '';
            var result = "\n";
            for (var x = 0; x < colNum; x++) {
                result += "|         列头        ";
                temp += "|    ------------   ";
            }
            result += "|\n" + temp + "|\n";
            for (var y = 1; y <= rowNum; y++) {
                for (var x = 1; x <= colNum; x++) {
                    result += "|   第" + y + "行,第" + x + "列   "
                }
                result += "|\n"
            }
            result += "\n";
            editor.doc.replaceSelection(result);
        };
        var code = function () {
            var str = editor.doc.getSelection();
            str = '```\n' + str + '\n```';
            editor.doc.replaceSelection(str);
        };
        var img = function () {
            var str = prompt("请输入图片url（如果要上传图片，可以直接使用截图工具截图后在编辑器中黏贴）");
            str = '![](' + str + ')';
            editor.doc.replaceSelection(str);
        };
        var line = function () {
            var str = "\n------------\n";
            editor.doc.replaceSelection(str);
        };
        var emoji = function () {
            alert("尚未完成");
        };
    </script>
    <script>
        var win = nw.Window.get();
        var rightScrolling = false;
        var isMaxSize = false;
        document.body.onselectstart = document.body.oncontextmenu = function () { return false; }
        var editor = CodeMirror.fromTextArea(mdStrTa, {
            lineNumbers: false
        });
        //标题栏的三个按钮；三栏布局宽度、高度自适应
        $(function () {
            var hWidth = win.width / 2;
            $(".left").width(hWidth-3);
            $(".right").width(hWidth - 16);
            $(".center").css({ "left": hWidth + "px" });
            editor.setSize("auto", "auto");
            win.on("resize", function (w, h) {
                var hWidth = w / 2 - 4;
                editor.setSize("auto", "auto");
                $(".left").width(hWidth-3);
                $(".right").width(hWidth - 16);
                if (!isMaxSize) {
                    $(".right").width(hWidth - 12);
                }
                $(".center").css({ "left": (hWidth) + "px" });
            });
            $("#winMin").click(function () {
                win.minimize();
            })
            $("#winMax").click(function () {
                if (isMaxSize) {
                    win.restore();
                    isMaxSize = false;
                    $(this).find("i").removeClass("icon-tubiaozhizuomoban").addClass("icon-max")

                } else {
                    win.maximize();
                    isMaxSize = true;
                    $(this).find("i").removeClass("icon-max").addClass("icon-tubiaozhizuomoban");
                }
            })
            $("#winClose").click(function () {
                win.close();
            })
            $("#toolRefreshBtn").click(function () {
                window.location.href = window.location.href;
            })
        })
        //滚动条同步
        $(function () {
            var rightScroll = function () {
                setTimeout(function () {
                    if (!rightScrolling) {
                        return;
                    }
                    var totalHeight = $(".right")[0].scrollHeight;
                    var enableHeight = totalHeight - $(".right")[0].clientHeight;
                    var leftHeight = enableHeight - $(".right").scrollTop();
                    var percent = leftHeight / enableHeight;
                    var scrollInfo = editor.getScrollInfo();
                    var enableHeight2 = scrollInfo.height - scrollInfo.clientHeight;
                    var top2 = enableHeight2 - enableHeight2 * percent;
                    editor.scrollTo(null, top2);
                }, 800);
            }
            $("#right").scroll(rightScroll);
            $("#right").mouseenter(function () {
                rightScrolling = true;
            }).mouseleave(function () {
                rightScrolling = false;
            })
            editor.on("change", function (instance, changes) {
                var str = instance.doc.getValue();
                var htmlStr = window.marked(str);
                $(".right").html(htmlStr);
            });
            var editorScroll = function () {
                setTimeout(function () {
                    if (rightScrolling) {
                        return;
                    }
                    var scrollInfo = editor.getScrollInfo();
                    var lineNumber = editor.lineAtHeight(scrollInfo.top, 'local');
                    var range = editor.getRange({ line: 0, ch: null }, { line: lineNumber, ch: null });
                    var parser = new DOMParser();
                    var doc = parser.parseFromString(marked(range), 'text/html');
                    var topLineIndex = doc.body.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, pre, blockquote, hr, table').length;
                    var eles = document.getElementById("right").querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, pre, blockquote, hr, table');
                    var scTop = eles[topLineIndex].offsetTop;
                    $(".right").scrollTop(scTop);
                }, 800)
            }
            editor.on("scroll", editorScroll);
        })
        //拖动改变左右分栏的大小
        $(function () {
            var _drag = {};
            _drag.left = 0; //拖动过的位置距离左边
            _drag.maxLeft; //距离左边最大的距离
            _drag.dragging = false; //是否拖动标志
            //拖动函数
            function bindDrag(el) {
                var winWidth = $(window).width(),
                    winHeight = $(window).height(),
                    objWidth = $(el).outerWidth(),
                    objHeight = $(el).outerHeight();
                _drag.maxLeft = winWidth - objWidth;
                var els = el.style, x = 0;
                var objLeft = $(el).offset().left;
                $(el).mousedown(function (e) {
                    _drag.dragging = true;
                    _drag.isDragged = true;
                    x = e.clientX - el.offsetLeft;
                    el.setCapture && el.setCapture();
                    $(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp);
                    return false;
                });
                function mouseMove(e) {
                    e = e || window.event;
                    if (_drag.dragging) {
                        _drag.left = e.clientX - x;
                        _drag.left = _drag.left > _drag.maxLeft ? _drag.maxLeft : _drag.left;
                        _drag.left = _drag.left < 0 ? 0 : _drag.left;
                        els.left = _drag.left + 'px';
                        return false;
                    }
                }
                function mouseUp(e) {
                    var leftW = $(".center").offset().left-2;
                    var rightW = win.width - leftW - 16;
                    if (isMaxSize) {
                        rightW -= 16;
                    }
                    $(".left").width(leftW);
                    $(".right").width(rightW);
                    editor.setSize(leftW);
                    _drag.dragging = false;
                    el.releaseCapture && el.releaseCapture();
                    e.cancelBubble = true;
                    $(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp);
                }
            }
            bindDrag(document.getElementById('center'));
        })
        $(function () {
            $("#getListBtn").click(function () {
                bky.getList(bky.pageIndex);
            });
            $("#rightPager").click(function () {
                bky.getList(bky.pageIndex + 1);
            })
            $("#leftPager").click(function () {
                if (bky.pageIndex - 1 < 1) {
                    return;
                }
                bky.getList(bky.pageIndex - 1);
            })
            $("#closePager").click(function () {
                $("#articleListBg").hide();
            })
            $("#saveBtn").click(bky.saveArticle);
            $("#newArticlePager").click(bky.newArticle);
            editor.on("paste",function(instance,event){
                bky.uploadImg(event,function(url){
                    var str = '![](' + url + ')';
                    editor.doc.replaceSelection(str);
                })
            })
        })
    </script>
</body>

</html>